<template>
  <div id="newsInformation">
    <img
      src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bannermc5.png"
      class="banner"
    />
    <!--<div>
      <img src="@/assets/image/fulibanner.jpg" width="100%">
    </div>-->
    <div class="news-container">
      <div class="news-nav">
        <div class="nav-title">
          <h3>全部</h3>
          <span>ALL</span>
        </div>
        <ul class="nav-ul">
          <li
            class="nav-li"
            :class="{ active: newsType === 0 }"
            @click="getNews(0)"
          >
            公司动态
          </li>
          <li
            class="nav-li"
            :class="{ active: newsType === 1 }"
            @click="getNews(1)"
          >
            行业新闻
          </li>
        </ul>
      </div>
      <ul class="news-list" v-if="newsType == 0">
        <template v-if="currentPage == 1">
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=14" class="title-synopsis">
              <h3 class="title">江苏铭创：企业更省心，员工福利多</h3>
              <p class="synopsis">
                铭创心选，直接对接国内知名的福利供应商。对意见产品进行采购，在采购意向达成之后…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2022</div>
              <div>06-14</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=13" class="title-synopsis">
              <h3 class="title">
                江苏铭创商务发展集团有限公司与欧菲斯携手合作，共创发展
              </h3>
              <p class="synopsis">
                每一步都在确立新高度的江苏铭创商务发展集团有限公司，又迎来了重要的历史时刻…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2022</div>
              <div>06-13</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=1" class="title-synopsis">
              <h3 class="title">
                江苏铭创商务发展集团有限公司“众志成城，抗击疫情”
              </h3>
              <p class="synopsis">
                疫情发生，形势危急，众志成城，抗击疫情。在突如其来的疫情面前，江苏铭创商务有限公司…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2022</div>
              <div>06-01</div>
            </div>
          </li>
        </template>
        <template v-if="currentPage == 2">
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=2" class="title-synopsis">
              <h3 class="title">
                江苏铭创商务发展集团有限公司，爱心捐赠助力疫情防控！
              </h3>
              <p class="synopsis">
                江苏铭创商务发展集团有限公司，爱心捐赠助力疫情防控！病毒无情人有情，众志成城战疫情。在当前全市…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2022</div>
              <div>03-21</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=3" class="title-synopsis">
              <h3 class="title">“福利领跑 创新转变 聚力数字化发展”！</h3>
              <p class="synopsis">
                “福利领跑创新转变聚力数字化发展”！当前，整个福利行业正在发生颠覆性的变化，从传统福利向互联…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2022</div>
              <div>03-11</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=4" class="title-synopsis">
              <h3 class="title">
                江苏铭创集团引入京东慧采平台 引领实物礼品行业新模式
              </h3>
              <p class="synopsis">
                江苏铭创集团引入京东慧采平台引领实物礼品行业新模式…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2021</div>
              <div>03-09</div>
            </div>
          </li>
        </template>
        <template v-if="currentPage == 3">
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=5" class="title-synopsis">
              <h3 class="title">
                温暖三月天，约会女神节，江苏铭创商务发展集团女神节慰问公益活动！
              </h3>
              <p class="synopsis">
                温暖三月天，约会女神节，江苏铭创商务发展集团女神节慰问公益活动！她们，是名副其实的“女神”，惟…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2021</div>
              <div>03-08</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=6" class="title-synopsis">
              <h3 class="title">
                江苏铭创商务 “福利领跑 创新转变 聚力数字化发展”！
              </h3>
              <p class="synopsis">
                江苏铭创商务“福利领跑创新转变聚力数字化发展”！当前，整个福利行业正在发生颠覆性的变化，从传…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2021</div>
              <div>03-01</div>
            </div>
          </li>
        </template>
      </ul>
      <ul class="news-list" v-else>
        <template v-if="currentPage == 1">
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=70" class="title-synopsis">
              <h3 class="title">四个维度分析礼品公司经营状况！</h3>
              <p class="synopsis">
                最近几年因为疫情的不确定性，很多行业都受到了不同程度的影响，礼品行业也不例外。然而，挑战总是与机遇
                …
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2022</div>
              <div>10-01</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=71" class="title-synopsis">
              <h3 class="title">2022礼品行业发展趋势及市场现状分析</h3>
              <p class="synopsis">
                礼品行业发展趋势及市场现状如何?随着近几年人们生活水平的提高，中国礼品行业销售收入将呈现快速增长趋势
                …
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2022</div>
              <div>09-28</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=7" class="title-synopsis">
              <h3 class="title">促销礼品定制三大类型</h3>
              <p class="synopsis">
                互联网的发展虽然越来越宽泛，很多商品都开始在网上寻找销售渠道，但是这并不妨碍活动促销产品的热衷。即使到今天节
                …
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2021</div>
              <div>09-24</div>
            </div>
          </li>
        </template>
        <template v-if="currentPage == 2">
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=8" class="title-synopsis">
              <h3 class="title">礼品定制的七大详细步骤</h3>
              <p class="synopsis">
                不同的礼品生产的周期也是不一样的，但是对于客户来说，我们做礼品定制的步骤大体上是相同，我们做礼品定制的步骤大体上是相同
                …
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2021</div>
              <div>09-24</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=9" class="title-synopsis">
              <h3 class="title">送不同客户什么礼品好?</h3>
              <p class="synopsis">
                跟客户形成良好的友谊是现代职场当中的非常重要的生存本领，一般情况下，送客户礼品多数都是大批量的赠
                …
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2021</div>
              <div>09-18</div>
            </div>
          </li>

          <li class="news-li">
            <nuxt-link to="/newsDetails?id=10" class="title-synopsis">
              <h3 class="title">做好员工福利，对现代企业很重要！</h3>
              <p class="synopsis">
                企业对员工福利的重视程度代表了企业的实力。“员工薪酬由基本薪酬、激励薪酬和福利构成。…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2020</div>
              <div>10-08</div>
            </div>
          </li>
        </template>
        <template v-if="currentPage == 3">
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=11" class="title-synopsis">
              <h3 class="title">企业咨询为什么可以为客户提供有价值的服务？</h3>
              <p class="synopsis">
                首先是咨询顾问具有较高的能力水平。这个很好理解，因为咨询顾问具有某些较强的能力，而这些能力正好…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2020</div>
              <div>09-29</div>
            </div>
          </li>
          <li class="news-li">
            <nuxt-link to="/newsDetails?id=12" class="title-synopsis">
              <h3 class="title">商务代理服务的作用，你知道吗？？</h3>
              <p class="synopsis">
                商务代理是代理人受企业的委托，在一定的区域和处所内，在一定的代理权限下，以企业的名义代替企…
              </p>
            </nuxt-link>
            <div class="date">
              <div style="margin: 1rem 0">2020</div>
              <div>08-15</div>
            </div>
          </li>
        </template>
      </ul>
    </div>
    <ul class="pagination" @click="getPages">
      <li class="pagination-item" :class="{ active: currentPage == 1 }">1</li>
      <li class="pagination-item" :class="{ active: currentPage == 2 }">2</li>
      <li class="pagination-item" :class="{ active: currentPage == 3 }">3</li>
    </ul>
    <div class="footer-top">
      <div class="licence-code">
        <ul class="nav">
          <li>首页</li>
          <li>产品与服务</li>
          <li>供应链</li>
          <li class="active">新闻中心</li>
          <li>关于我们</li>
          <li>联系我们</li>
        </ul>
        <div>
          <h5 class="about-h55">服务热线</h5>
          <h5>025-85500001</h5>
        </div>
        <!-- <div>
          <h5 class="about-h55">企业地址</h5>
          <p class="adress">
            南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园
          </p>
          <p class="adress">
            徐州分公司：徐州市云龙区和平大道58号万达广场A座12楼
          </p>
          <p class="adress">淮安分公司：淮安市淮阴区南昌北路9号中业慧谷</p>
        </div> -->
      </div>
    </div>
    <right-kefu></right-kefu>
  </div>
</template>

<script>
import THeader from "@/components/t-header";
export default {
  name: "newsInformation",
  components: {
    THeader,
  },
  data() {
    return {
      newsType: 0,
      page: 0,
      currentPage: 1,
    };
  },
  methods: {
    getNews(index) {
      this.newsType = index;
    },
    getPages(e) {
      this.currentPage = e.target.innerText;
    },
  },
};
</script>

<style scoped lang="scss">
#newsInformation {
  .footer-top {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 16rem;
    background: linear-gradient(180deg, #e63f04, #ac0d0d);
    color: #fff;

    .licence-code {
      width: 120rem;
      height: 16rem;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav {
        display: flex;

        li {
          font-size: 1.6rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 2rem;
          margin-right: 4.1rem;
        }

        .active {
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;
        }
      }

      .about-h55 {
        margin: 0rem 0 1.8rem;
      }

      .licence-h5,
      .QR-code-h5 {
        padding-bottom: 1.6rem;
        border-bottom: 1px solid #fff;
        margin: 2rem 0 1.1rem;
      }

      h5 {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
      }

      p {
        margin-bottom: 0.7rem;
        font-size: 1.4rem;
        line-height: 1.9rem;
      }
    }
  }
  .banner {
    width: 100%;
  }
  .news-container {
    margin: 3.8rem auto 0;
    width: 103rem;
    display: flex;
    .news-nav {
      background: linear-gradient(180deg, #e63f04, #ac0d0d 100%);
      width: 21.3rem;
      flex: 0 0 21.3rem;
      height: 28.9rem;
      color: #fff;
      .nav-title {
        padding: 2.7rem 0 1.6rem 4rem;
        h3 {
          color: #fff;
          font-size: 2rem;
          line-height: 2.6rem;
          margin-bottom: 0.2rem;
        }
        span {
          font-size: 1.3rem;
          line-height: 1.7rem;
        }
      }
      .nav-ul {
        padding: 0 3rem;
        .nav-li {
          font-size: 1.3rem;
          padding: 1.6rem 0 2rem;
          border-bottom: 1px solid #fff;
          display: flex;
          align-items: center;
          cursor: pointer;
          &:before {
            content: "";
            display: block;
            width: 0.4rem;
            height: 1.3rem;
            background: transparent;
            margin-right: 0.7rem;
          }
          &:hover {
            color: #d8d8d8;
          }
        }
        .active {
          &:before {
            content: "";
            display: block;
            width: 0.4rem;
            height: 1.3rem;
            background: #fff;
            margin-right: 0.7rem;
          }
        }
      }
    }
    .news-list {
      margin-left: 3.7rem;
      .news-li {
        display: flex;
        padding: 1.2rem 3rem 3.4rem 0;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 6.2rem;
        cursor: pointer;
        &:hover {
          .news-img {
            img {
              transform: scale(1.2);
              transition: transform linear 0.7s;
            }
          }
          .title-synopsis {
            .title {
              color: #b10808;
            }
          }
        }
        .news-img {
          width: 20rem;
          flex: 0 0 20rem;
          height: 12rem;
          margin-right: 4.4rem;
          overflow: hidden;
          img {
            width: 20rem;
            height: 12rem;
            object-fit: cover;
            transition: transform linear 0.4s;
          }
        }
        .title-synopsis {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .title {
            font-size: 1.6rem;
            margin-bottom: 1.6rem;
            color: #666;
          }
          .synopsis {
            width: 62.8rem;
            font-size: 1.3rem;
            color: #afafaf;
            line-height: 2rem;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .date {
          align-items: center;
          color: #999;
          font-size: 2.7rem;
          margin-left: 4.7rem;
          white-space: nowrap;
        }
      }
    }
  }
  .pagination {
    margin: 0 auto 6.6rem;
    display: flex;
    justify-content: center;
    width: 117rem;
    padding-left: 25rem;
    .pagination-item {
      width: 3.5rem;
      line-height: 3.5rem;
      text-align: center;
      background-color: #c9c9c9;
      margin-right: 2rem;
      color: #fff;
      cursor: pointer;
      font-size: 1.4rem;
    }
    .active {
      background-color: #4b4b4b;
    }
  }
}
@media screen and (max-width: 750px) {
  .nav-li {
    position: relative;
    border-bottom: none !important;
    &:after {
      display: block;
      content: "";
      height: 1px;
      background-color: #fff;
      position: absolute;
      width: 100%;
      bottom: 0;
      transform: scaleY(0.5);
    }
  }
  .news-li {
    position: relative;
    border-bottom: none !important;
    &:after {
      display: block;
      content: "";
      height: 1px;
      background-color: #eaeaea;
      position: absolute;
      width: 100%;
      bottom: 0;
      transform: scaleY(0.5);
    }
  }
}
</style>
